<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>
<div id="app">
    <form action="">
       userName: <input v-model="userName"><br>
       age: <input v-model="age"><br>
       addr: <input v-model="addr"><br>
       score: <input v-model="score" ><br>
        <hr>
        <input type="button" value="获取表单数据" @click="getData">
        <input type="button" value="设置表单数据" @click="setData">
    </form>
</div>

<script src="js/vue.js"></script>
<script>
   var vue=new Vue({
       el:"#app",
       data:{userName: "",
           age:"",
           addr:"",
           score:""
       },
       methods:{
           getData(){
               console.log(this.userName);
               console.log(this.age);
               console.log(this.addr);
               console.log(this.score);
           },
           setData(){
               this.userName="张三丰",
               this.age=20,
               this.addr="广东深圳",
               this.score=100
           }
       }

   })
</script>
</body>
</html>